

 // 0. 获取元素
 const search = document.querySelector('input')
 const box = document.querySelector('.ul')

 // 1. 给 search 绑定表单输入事件
 search.oninput = function () {
   // 2. 拿到文本框输入的内容
   const text = this.value

   // 3. 根据 text 关键字请求数据了
   // 3-1. 创建一个 script 标签
   const script = document.createElement('script')
   // 3-2. 手动设置 script 标签的 src 属性
   // 设置 script 标签的原生属性 src
   script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
   // 3-3. 把这个 script 标签插入到 body 内部
   document.body.appendChild(script)
   // 3-4. script 标签的下场
   // 需要他的目的, 是为了利用 src 发送一个请求, 回来以后会执行 js 代码
   // 请求发送出去以后, 就没有用了
   script.remove()
 }

 // 4. 需要在全局准备一个 fn 函数
 function fn(res) {
   // res 就是后端返回给我的数据
   // 我就根据 res 去渲染页面
   console.log(res)

   // 通过判断res 内是否有 g 这个数据
   // 来决定我是否渲染
   if (!res.g) {
     // 代码能执行到这里, 表示 res 内没有 g 这个数据
     // 让 ul 隐藏
     box.style.display = 'none'
     // 直接 return
     return
   }

   // 代码能来到这里
   // 说明 res 内的 g 是一个数组
   // 那么就循环数组渲染到 box 内部
   let str = ''
   res.g.forEach(item => {
     str += `<li>${ item.q }</li>`
   })
   box.innerHTML = str

   // 让 box 显示
   box.style.display = 'block'
 }


 // 列表页的逻辑

// 0. 获取元素
const cateBox = document.querySelector('.category > ul')
const listBox = document.querySelector('.list')
const pageBox = document.querySelector('.pageInfo')
const filterbox = document.querySelector('.box3')
const sorts = document.querySelectorAll('.sortItem > span')
const select = document.querySelector('select')

// 1. 请求分类列表渲染到指定位置
getCategoryList()
async function getCategoryList() {

  // 1-1. 直接发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/goods/category',
    dataType: 'json'
  })

  // 1-2. 获取列表结果, 渲染页面
  let str = ``
  // 循环遍历列表
  res.list.forEach(item => {
    str += `<li class="cateItem">${ item }</li>`
  })

  // 1-3. 添加到指定标签内
  cateBox.innerHTML = str
}


// 2. 获取商品列表渲染一次
/*
  获取商品列表的时候, 可以携带一些参数
    + 就需要定义若干变量, 保存一些值
    + 在发送请求的时候, 拼接成参数
    + 准备一个对象, 里面写上一些成员
    + 我们通过循环遍历对象的方式, 来拼接参数

*/

// 2-1. 准备一个对象, 把需要的参数都写好
// 有默认值的就先不写
const listInfo = {
  current: 1,
  pagesize: 12,
  search: '',
  filter: '',
  saleType: 0,
  sortType: '',
  sortMethod: '',
  category: ''
}

const filterArr = []

// 2-2. 请求列表数据
getGoodsList()
async function getGoodsList() {
  // 2-2-1. 把对象数据类型 listInfo 转换成一个 查询字符串
  let data = ''
  for (let key in listInfo) {
    if (listInfo[key]) data += key + '=' + listInfo[key] + '&'
  }
  data = data.slice(0, -1)

  // 2-2-2. 按照接口文档请求列表数据
  const res = await pAjax({
    url: 'http://localhost:8888/goods/list',
    data,
    dataType: 'json'
  })
  console.log(res)
  // 解构对象    键       对象
  const { list, total } = res

  // 2-2-3. 渲染页面
  let str = ''
  list.forEach(item => {
    str += `
      <li data-id="${ item.goods_id }">
        <div class="show">
          <img src="${ item.img_big_logo }" alt="">
        </div>
        <div class="desc">
          <p class="info">${ item.title }</p>
          <p class="price">
            <span class="current">￥ ${ item.current_price }</span>
            <span class="old">￥ ${ item.price }</span>
          </p>
          <button data-id="${ item.goods_id }">直接购买</button>
        </div>
        <span class="tip ${ item.is_hot ? 'active' : '' }">HOT</span>
        <span class="tip ${ item.is_sale ? 'active' : '' }">SALE</span>
      </li>
    `
  })
  listBox.innerHTML = str

  // 2-2-4. 渲染多少页, 一页多少条
  pageBox.innerHTML = ` ${ listInfo.current } / ${ total } `
}


// 3. 各种条件筛选
// 3-1. 事件委托, 做所有的点击事件
// 委托给谁
filterbox.addEventListener('click', e => {
  // 事件对象兼容
  e = e || window.event
  // 事件目标兼容
  const target = e.target || e.srcElement

  // 判断点击的是谁
  // 3-2. 判断点击的是分类内容
  if (target.className === 'cateItem') {
    console.log('你点击的是分类内容')
    // 3-2. 点击谁, 就应该让 listInfo 里面的 category 信息修改为谁的对应文本
    listInfo.category = target.innerText
    // 从新请求渲染页面
    getGoodsList()
    // 让 cateBox 里面的所有子元素没有类名
    for (let i = 0; i < cateBox.children.length; i++) {
      cateBox.children[i].classList.remove('active')
    }
    // 让点前点击的这个有 active 类名
    target.classList.add('active')
  }

  // 3-3. 判断点击的是筛选条件
  if (target.className.indexOf('filterItem') !== -1) {
    // 点击谁, 就把 filter 修改为谁
    // 拿到你点击的这个标签身上的自定义属性 data-type
    const type = target.dataset.type
    filterArr.push(type)
    // 把数组去重以后的结果赋值给 listInfo.filter
    listInfo.filter = [ ...new Set(filterArr) ].join(',')
    // 给当前点击的这一个添加 active 类名
    target.classList.add('active')
    // 从新请求
    getGoodsList()
  }

  // 3-4. 判断点击的是搜索按钮
  if (target.className === 'searchBtn') {
    // 拿到 input 输入的内容
    const searchText = target.previousElementSibling.value
    // 把 listInfo 内的 search 修改掉
    listInfo.search = searchText
    // 从新请求
    getGoodsList()
  }

  // 3-5. 判断点击的是排序按钮
  if (target.className === 'sortItem') {
    console.log('点击的是排序按钮')
    // 拿到你点击的按钮身上的自定义属性
    const type = target.dataset.type
    const method = target.dataset.method

    // 取消所有 span 标签的类名
    for (let i = 0; i < sorts.length; i++) {
      sorts[i].classList.remove('active')
    }

    // 修改标签的状态
    if (method === 'ASC') {
      target.dataset.method = 'DESC'
      target.lastElementChild.classList.add('active')
    } else {
      target.dataset.method = 'ASC'
      target.firstElementChild.classList.add('active')
    }

    // 修改 listInfo 内的数据
    listInfo.sortType = type
    listInfo.sortMethod = method === 'ASC' ? 'DESC' : 'ASC'

    // 从新请求数据
    getGoodsList()
  }

  // 3-6. 判断点击的是上一页
  if (target.className === 'prev1') {
    // 直接让 listInfo 内的 current --
    if (listInfo.current !== 1) listInfo.current--
    // 从新渲染页面
    getGoodsList()
  }

  // 3-7. 判断点击的是下一页
  if (target.className === 'next1') {
    // 直接让 listInfo 内的 current ++
    listInfo.current++
    // 从新渲染
    getGoodsList()
  }
})

// 3-8. 改变一页显示多少条
// 直接给 select 标签绑定一个 change 事件
select.addEventListener('change', () => {
  // 拿到改变后的内容
  const pagesize = select.value

  // 修改信息
  listInfo.pagesize = pagesize

  // 从新请求数据
  getGoodsList()
})

// 4. 点击当前商品, 跳转到详情页
// 事件委托给 listBox
listBox.addEventListener('click', async e => { 
  e = e || window.event
  const target = e.target || e.srcElement

  // 判断点击的是 li 标签的类名
  if (target.tagName === 'LI') {
    // 在跳转页面的时候, 最好把商品id 带到新的详情页面
    const id = target.dataset.id
    // 存储在 sessionStorage 里面
    window.sessionStorage.setItem('goods_id', id)
    // 跳转页面
    window.location.href = './detail.html'
  }

  // 4-2. 判断点击的是 加入购物车 按钮
  if (target.tagName === 'BUTTON') {
    // 4-2-1. 拿到 localStorage 内部是不是有 id 和 token
    // 如果没有, 去到登录页
    const id = window.localStorage.getItem('id')
    const token = window.localStorage.getItem('token')

    // 4-2-2. 判断 id 和 token 是否存在
    if (!id || !token) {
      const result = window.confirm('您还没有登录, 点击确定跳转到登录页, 点击取消稍后在购买 !')
      // 跳转之前, 标识一下 url 信息
      window.localStorage.setItem('url', 'list')

      // 跳转回到登录页
      if (result) window.location.href = './login.html'
      return
    }

    // 4-2-3. 拿到当前的商品 id
    const goodsId = target.dataset.id

    // 4-2-4. 发送请求加入购物车
    const res = await pAjax({
      url: 'http://localhost:8888/cart/add',
      token,
      data: `id=${id}&goodsId=${goodsId}`,
      method: 'post',
      dataType: 'json'
    })
    
    
    // 4-2-4. 提示用户
    if (res.code === 1) window.alert('加入购物车成功了')

    // 4-2-5. 加入不成功的时候, 提示用户
  }
})
